<template>
	<view class="votingList">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#060143'}"></view>
		<uni-nav-bar backgroundColor="#060143;" color="#FFF" :title="$t('language.live5')" @clickLeft="goBack" left-icon="left"
			:border="false" />
		
		<view class="logo">
			<image class="logo-ic" src="@/static/logo.png" alt="" />
			<view class="lang-wrap" @click="changeLanguage">
				<image src="../../static/100.png" mode=""></image>
				<text>{{$t('locale.lang')}}</text>
			</view>
		</view>
		<view class="votingListBox">
			<view class="tab">
				<view :class="onTab == 1?'activeOn':''" @click="onTabClick(1)">{{$t('language.live')}}</view>
				<view :class="onTab == 2?'activeOn':''" @click="onTabClick(2)">{{$t('language.live2')}}</view>
			</view>
		</view>
		<view class="for-votingList">
			<!-- <view class="forList">
                <view class="title">
                    以下哪项描述最符合您的投资态度?
                </view>
                <view class="time">
                    2023-05-04 <van-icon name="arrow" />
                </view>
            </view> -->
			<view class="forList" v-for="(item,index) in votingList" :key='index' @click="toVotingInfo(item.vote_id)">
				<view class="title">
					{{item.title}}
				</view>
				<view class="time">
					{{item.add_time}}

					<uniIcons type="forward" size="14" color="#929295"></uniIcons>
				</view>
			</view>
			<view style="padding:80upx 0" class="tab" v-if="votingList.length == 0">
				<view style="text-align:center;color:#999">
					~ {{$t('language.nomore')}} ~
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import {
		vote
	} from "@/api/user";
	let timer = null
	export default {
		name: 'VotingList',
		components: {
			uniIcons
		},
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				onTab: 1,
				evenId: '',
				nomore: '',
				votingList: []
			}
		},
		onLoad(o) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			let evenId = o.evenId;
			this.evenId = evenId;
		},
		onShow() {
			this.getVotingList();
		},
		created() {},
		methods: {
			async getVotingList() {
				const response = await vote({
					event_id: this.evenId,
					type: this.onTab
				})
				if (response.code == 200) {
					console.log(response)
					this.votingList = response.data
					if (response.length == 0) {
						this.nomore = response.msg
					}
				} else {
					console.log(response.msg);
				}

			},
			onTabClick(index) {
				this.onTab = index
				this.getVotingList()
			},
			toVotingInfo(vote_id) {
				uni.navigateTo({
					url: '/pages/LiveInteraction/VotingInfo?vote_id=' + vote_id + '&event_id=' + this.evenId +
						'&type=' + this.onTab
				})
			},
			goBack() {
				uni.redirectTo({
					url: '/pages/LiveInteraction/LiveInteraction?evenId=' + this.evenId
				})
				// uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	}
</script>
<style lang="scss">

	.logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx;
		background-color: #060143;

		.logo-ic {
			width: 78upx;
			height: 64upx;
		}

		.lang-wrap {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24upx;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 12upx;
			}
		}
	}

	page {
		background-color: #050033;
	}

	.votingList {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		// padding-top: 0.5rem;
		background: #050033;
	}

	.headerChangeLanguage {
		height: 100upx;
		background: #fff;
		padding: 0 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2upx 4upx #ccc;
		width: 100%;
		box-sizing: border-box;
	}

	.logo image {
		width: 178upx;
		height: 30upx;
	}


	.language {
		flex-shrink: 0;
	}

	.langeageZh {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/EN-17.png') no-repeat;
		background-size: 86upx 30upx;
	}

	.langeageEn {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/CH-17.png') no-repeat;
		background-size: 86upx 30upx;
	}

	.votingListBox .tab {
		width: 100%;
		background: #050033;
		height: 80upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #fff;
	}

	.votingListBox .tab>view {
		height: 80upx;
		display: inline-block;
		padding: 0 8upx;
		line-height: 80upx;
	}

	.votingListBox .activeOn {
		color: #b88d5b;
		border-bottom: 2upx solid #b88d5b
	}

	.for-votingList {
		padding: 30upx;
	}

	.forList {
		min-height: 170upx;
		background: #060143;
		border-radius: 8upx;
		margin-bottom: 30upx;
		padding: 0 30upx;
		position: relative;
	}

	.title {
		min-height: 92upx;
		padding-top: 20upx;
		color: #fff;
		font-size: 32upx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		box-sizing: border-box;
		// border-bottom: 2upx solid #ebebeb;
	}

	.time {
		color: #999999;
		font-size: 24upx;
		height: 80upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 630upx;
		position: absolute;
		bottom: 0;
	}

	.time image {
		width: 30upx;
		height: 30upx;
	}
</style>